<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 表单验证
    el-form  
       :model="表单元素对应的值的对象（包含所有表单元素的值）"
       :rules="表单验证规则对象"
    el-form-item
        prop:需要验证项的字段名（与表单元素的v-model对应值的字段名要一样）


   表单验证规则对象：{
       prop对应的值：[
       required：必填：有值（'',undefined,null,[]）就叫没填，如果不是这些就叫有值
       trigger:checkbox,select只有change
       {required(必填):true,message:'错误信息',trigger:"change(值改变时触发)/blur（失去焦点）"}，
       {min:最小输入长度,max:最大输入长度,message:'错误信息',trigger:'change(值改变时触发)/blur（失去焦点）'}           
       ]
   }
       全局表单验证
       el-form   methods:{表单验证方法(){}}
          1:el-form绑定ref属性  ref="form"
          2:this.$refs.form.validate((result)=>{
            if(result){
              表单验证通过
            }else{
              表单验证不通过
            }
          })
    局部表单验证
       调用el-form组件上的一个validateField方法(['需要验证的字段名(prop的值)'],(errorMessage)=>{
         errorMessage:错误信息
         有错误信息表示验证失败，没有错误信息（为空）表示 验证成功
       })
       1：el-form绑定ref属性  ref="form"
       2：this.$refs.form.validateField(['需要验证的项'],(errorMessage)=>{
         if(errorMessage){
           验证失败
         }else{
           验证成功
         }
       }) 
 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <div id='app'>
        <el-form label-width='80px' :model='form' :rules='rules' ref='form'>
            <el-form-item label="手机号" prop='tel'>
                <el-input placeholder="请输入手机号" v-model="form.tel"></el-input>
            </el-form-item>
            <el-form-item label='验证码' prop='code'>
                <el-input placeholder="请输入验证码" v-model="form.code"></el-input>
                <el-button @click='getCode'>发送验证码</el-button>
            </el-form-item>
            <el-form-item prop='check' label='选项'><br>
                <el-checkbox label='1' v-model="form.check">选项</el-checkbox>
            </el-form-item>
            <el-form-item label-width='0'>
                <div style="text-align: center">
                    <el-button @click='submit'>登录</el-button>
                    <el-button>取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                form: {
                    tel: '',
                    code: '',
                    check: []
                },
                rules: {
                    tel: [{ required: true, message: '必填', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确手机号', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                            if (reg.test(value)) {
                                callback()
                            } else {
                                callback(new Error('请输入正确完整手机号'))
                            }
                        }, trigger: 'blur'
                    }],
                    code: [{ required: true, message: '必填', trigger: 'blur' },
                    { min: 4, max: 4, messaage: '请输入正确验证码', trigger: 'blur' }],
                    check: [{ required: true, message: '必填', trigger: 'change' },]
                },
            },

            methods: {
                submit() {
                    this.$refs.form.validate(res => { if (res) { console.log("通过") } else { console.log(res); } })
                },
                getCode() {
                    this.$refs.form.validateField(['tel'], errorMessage => console.log(errorMessage))
                }
            }
        })
    </script>
</body>

</html>